<template>
  <div>
    <div class="banner">
      <div class="w1160 flex column">
        <h2>橙券新闻动态</h2>
        <p>
          新闻动态抢先看，从能力输出到技术赋能，橙券从未放缓脚步，只为与您见证橙券成长的每一步！
        </p>
      </div>
    </div>
    <!-- banner结束 -->
    <!-- warp-news开始 -->
    <div class="news">
      <div class="news-list">
        <ul class="flex flex-row flex-wrap flex-between w1200">
          <li v-for="item in news" :key="item.id">
            <img
              src="@/assets/img/news/news-details/3.png"
              width="478"
              height="273"
              alt="!"
            />
            <p>
              <a href="#">{{ item.desc }}</a>
            </p>
            <p>{{ item.date }}</p>
          </li>
        </ul>
      </div>
    </div>
    <!-- warp-news结束 -->
    <!-- warp-page开始 -->
    <div class="warp-page">
      <ul class="news-page flex flex-center">
        <li v-for="item in pageNum" :key="item.num">
          <a href="">{{ item.num }}</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "PracticeOrangenew",
  data() {
    return {
      news: [
        {
          desc: "人生一串，肆意欢歌——鼎信海边烧烤嘻游记",
          date: "2018-05-01",
        },
        {
          desc: "对酒当歌，肆意欢歌——鼎信海边烧烤嘻游记",
          date: "2018-05-01",
        },
        {
          desc: "悲欢离合，肆意欢歌——鼎信海边烧烤嘻游记",
          date: "2018-05-01",
        },
        {
          desc: "阴晴圆缺，肆意欢歌——鼎信海边烧烤嘻游记",
          date: "2018-05-01",
        },
        {
          desc: "好不潇洒，路快速的减肥啦速度来开房记录",
          date: "2018-05-01",
        },
        {
          desc: "人生一串，范德萨发生的考虑房价来看经理开始的考虑房价快科技福利卡上的解放了空间",
          date: "2018-05-01",
        },
        {
          desc: "人生一串，肆意欢歌——鼎信海边烧烤嘻游记",
          date: "2018-05-01",
        },
        {
          desc: "人生一串，肆意欢歌——鼎信海边烧烤嘻游记",
          date: "2018-05-01",
        },
        {
          desc: "人生一串，肆意欢歌——鼎信海边烧烤嘻游记",
          date: "2018-05-01",
        },
      ],
      pageNum: [{ num: "1" }, { num: "2" }, { num: "3" }, { num: "4" }],
    };
  },

  mounted() {},

  methods: {
    get() {
      console.log(this.news.date);
    },
  },
};
</script>

<style lang="scss" scoped>
.w1160 {
  margin: 0 auto;
  width: 1160px;
}
.w1200 {
  margin: 0 auto;
  width: 1200px;
}

.flex {
  display: flex;
}

.flex-center {
  justify-content: center;
  align-items: center;
}

.flex-evenly {
  justify-content: space-evenly;
}

.flex-between {
  justify-content: space-between;
}

.flex-row {
  flex-direction: row;
}

.flex-column {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.banner {
  padding-top: 200px;
  height: 200px;
  background: url(@/assets/img/news/banner.png) no-repeat center/cover;
}

.banner div {
  text-align: center;
}

.banner div h2 {
  color: #fff;
  font-size: 40px;
  font-weight: 200;
}

.banner div p {
  color: #fff;
  font-size: 20px;
}

/* banner-end */

/* news */
.news {
  padding-bottom: 60px;
  padding-top: 82px;
  background-color: #fcfcfc;
}

.news .news-list ul li {
  box-shadow: 0px 0px 10px 0px rgba(237, 237, 237, 0.7);
  box-sizing: border-box;
  background-color: #fff;
  width: 385px;
  height: 328px;
  margin-bottom: 60px;
}

.news .news-list ul li img {
  width: 100%;
  height: auto;
}

.news .news-list ul li p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 16px;

  padding: 10px 10px 0 20px;
}

.news .news-list ul li p a {
  color: #333;
}

.news .news-list ul li p a:hover {
  color: #ff7c00;
  text-decoration: none;
}

.news .news-list ul li p:nth-of-type(2) {
  color: #666;
  font-size: 14px;
}

.news-page {
  width: 260px;
  margin: 0 auto;
  margin-bottom: 65px;
}

.news-page::before {
  content: "\e601";
  display: inline-block;
  margin-right: 40px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  text-align: center;
  line-height: 22px;
  font-family: "icomoon";
  transform: rotate(180deg);
  background-color: #dedede;
  color: #fff;
}

.news-page::after {
  content: "\e601";
  display: inline-block;
  margin-left: 40px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  text-align: center;
  line-height: 22px;
  font-family: "icomoon";
  background-color: #dedede;
  color: #fff;
}

.news-page li {
  border-radius: 50%;
  width: 35px;
  height: 35px;
  font-size: 16px;
  text-align: center;
  color: #666;
}

.news-page li a {
  line-height: 35px;
  font-size: 16px;
  color: #666;
}

.news-page li:hover {
  background-color: #ff7200;
}

.news-page li:hover a {
  color: #fff;
}
</style>